تسجيل وقت تشغيل JavaScript Module Federation: اكتشاف الوحدات النمطية الديناميكي

لقد أحدث Module Federation، وهي ميزة قوية قدمها Webpack 5، ثورة في طريقة بناء وتوزيع تطبيقات JavaScript، خاصة في مجال الواجهات الأمامية الصغيرة. فهو يسمح للتطبيقات المختلفة، التي تم إنشاؤها وتوزيعها بشكل مستقل، بمشاركة التعليمات البرمجية والوظائف في وقت التشغيل. في حين أن تكوينات module federation الثابتة شائعة، إلا أن القوة الحقيقية تكمن في اكتشاف الوحدات النمطية الديناميكي باستخدام Runtime Registry. تتعمق هذه المقالة في مفهوم Runtime Registry لـ Module Federation، وتستكشف تنفيذه وفوائده وحالات الاستخدام المتقدمة.

ما هو Runtime Registry؟

في سياق Module Federation، يعمل Runtime Registry كدليل مركزي أو خدمة توفر معلومات حول الوحدات النمطية البعيدة المتاحة. بدلاً من الترميز الثابت لمواقع الوحدات النمطية البعيدة داخل تكوين تطبيقك، يمكنك الاستعلام عن السجل في وقت التشغيل لاكتشاف وتحميل الوحدات النمطية الضرورية. يقدم هذا النهج الديناميكي العديد من المزايا:

• فك الارتباط: تكون التطبيقات أقل ارتباطًا وثيقًا بإصدارات أو مواقع محددة للوحدات النمطية البعيدة.
• قابلية التوسع: من الأسهل إضافة الوحدات النمطية البعيدة أو إزالتها أو تحديثها دون إعادة توزيع التطبيقات المستهلكة.
• القدرة على التكيف: تتيح تبديل الميزات الديناميكي واختبار A/B من خلال تقديم وحدات نمطية مختلفة بناءً على ظروف وقت التشغيل.
• المرونة: إذا كانت إحدى الوحدات النمطية البعيدة غير متاحة، فيمكن للسجل توفير موقع أو إصدار بديل.

لماذا استخدام Runtime Registry؟

ضع في اعتبارك منصة تجارة إلكترونية كبيرة تتكون من عدة واجهات أمامية صغيرة، مثل كتالوج المنتجات وعربة التسوق وحسابات المستخدمين. يتم تطوير كل واجهة أمامية صغيرة ونشرها بشكل مستقل. بدون Runtime Registry، ستحتاج كل واجهة أمامية صغيرة إلى معرفة الموقع الدقيق وإصدار أي وحدات نمطية أو مكونات مشتركة تستخدمها واجهات أمامية صغيرة أخرى. يؤدي هذا إلى اقتران وثيق ويجعل التحديثات صعبة. على سبيل المثال، يتطلب تحديث مكون واجهة مستخدم مشتركة إعادة توزيع جميع الواجهات الأمامية الصغيرة التي تعتمد عليه.

ومع ذلك، باستخدام Runtime Registry، تستعلم الواجهات الأمامية الصغيرة ببساطة عن السجل لمعرفة موقع وإصدار المكون المطلوب. يمكن للسجل بعد ذلك توفير المعلومات المناسبة، مما يسمح للواجهات الأمامية الصغيرة بتحميل المكون ديناميكيًا. يسمح هذا الفصل بتحديثات مستقلة ويقلل من خطر التغييرات الجذرية.

تنفيذ Runtime Registry

هناك عدة طرق لتنفيذ Runtime Registry، تتراوح من ملفات JSON بسيطة إلى خدمات أكثر تعقيدًا مع إمكانات التحكم في الإصدار والتوجيه. فيما يلي مثال أساسي باستخدام ملف JSON بسيط مستضاف على خادم ويب:

1. تعريف السجل (registry.json):

{
  "modules": {
    "@my-org/product-card": {
      "1.0.0": "https://cdn.example.com/product-card/1.0.0/remoteEntry.js",
      "1.1.0": "https://cdn.example.com/product-card/1.1.0/remoteEntry.js"
    },
    "@my-org/checkout-button": {
      "2.0.0": "https://cdn.example.com/checkout-button/2.0.0/remoteEntry.js"
    }
  }
}

يحدد ملف JSON هذا الوحدات النمطية المتاحة وعناوين URL المقابلة لها. يحتوي كل وحدة نمطية على إدخالات ذات إصدارات تشير إلى ملفات `remoteEntry.js` الخاصة بها. يتيح ذلك إدارة الإصدارات والتراجع السهل إذا لزم الأمر.

2. تطبيق الاستهلاك:

async function loadRemote(moduleName, version) {
  const registryUrl = 'https://example.com/registry.json';
  const response = await fetch(registryUrl);
  const registry = await response.json();

  const moduleInfo = registry.modules[moduleName];
  if (!moduleInfo) {
    throw new Error(`Module "${moduleName}" not found in registry.`);
  }

  const moduleUrl = moduleInfo[version];
  if (!moduleUrl) {
    throw new Error(`Version "${version}" for module "${moduleName}" not found.`);
  }

  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = moduleUrl;
    script.type = 'text/javascript';
    script.async = true;
    script.onload = () => {
      // Module is loaded, you can now access it using window[moduleName]
      resolve(window[moduleName]);
    };
    script.onerror = (error) => {
      console.error(`Error loading module ${moduleName} from ${moduleUrl}:`, error);
      reject(error);
    };
    document.head.appendChild(script);
  });
}

// Example usage:
loadRemote('@my-org/product-card', '1.0.0')
  .then((module) => {
    // Use the loaded module
    const ProductCard = module.ProductCard;
    const productCardInstance = new ProductCard({ name: 'Example Product' });
    document.getElementById('product-card-container').appendChild(productCardInstance.render());
  })
  .catch((error) => {
    console.error('Failed to load product card:', error);
  });

يوضح مقتطف الشفرة هذا كيفية جلب السجل وتحديد موقع الوحدة النمطية والإصدار المطلوبين وتحميل الإدخال البعيد ديناميكيًا. يتضمن أيضًا معالجة أساسية للأخطاء.

3. تكوين Webpack (التطبيق البعيد):

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  //...
  plugins: [
    new ModuleFederationPlugin({
      name: '@my-org/product-card',
      filename: 'remoteEntry.js',
      exposes: {
        './ProductCard': './src/ProductCard',
      },
      // shared: { ... }, // Shared dependencies
    }),
  ],
};

هذا هو تكوين Module Federation Webpack القياسي للتطبيق البعيد الذي يعرض مكون `ProductCard`. المفتاح هنا هو أن `filename` هو `remoteEntry.js`، وهو الملف المشار إليه في السجل.

حالات الاستخدام المتقدمة

يمكن توسيع المثال البسيط أعلاه للتعامل مع سيناريوهات أكثر تعقيدًا:

إدارة الإصدارات

يمكن للسجل تخزين إصدارات متعددة من كل وحدة نمطية، مما يسمح للتطبيقات المستهلكة بتحديد الإصدار المطلوب. يعد هذا أمرًا بالغ الأهمية للحفاظ على التوافق والسماح بالترقيات التدريجية.

مثال: يمكن أن يحتوي السجل على معلومات الإصدار ويمكن لتطبيق الاستهلاك طلب إصدارًا معينًا أو نطاقًا من الإصدارات المقبولة (مثل '>=1.0.0 <2.0.0'). يمكن للسجل بعد ذلك إرجاع عنوان URL المناسب بناءً على الطلب.

التوجيه وموازنة التحميل

يمكن أن يعمل السجل كموازن تحميل، حيث يوجه الطلبات إلى خوادم مختلفة بناءً على التوفر أو الموقع الجغرافي. يمكن أن يؤدي ذلك إلى تحسين الأداء والموثوقية.

مثال: يمكن أن يحتوي السجل على عناوين URL متعددة لنفس الوحدة النمطية، مع توجيه كل عنوان URL إلى شبكة CDN أو خادم مختلف. يمكن للسجل بعد ذلك استخدام خوارزمية موازنة التحميل لتوزيع الطلبات عبر الخوادم المتاحة.

المصادقة والترخيص

يمكن للسجل فرض سياسات المصادقة والترخيص، مما يضمن أن التطبيقات المصرح لها فقط هي التي يمكنها الوصول إلى وحدات نمطية معينة. هذا ضروري لتأمين التعليمات البرمجية والبيانات الحساسة.

مثال: يمكن أن يطلب السجل مفتاح API أو رمزًا مميزًا للوصول إلى معلومات الوحدة النمطية. سيحتاج تطبيق الاستهلاك إلى توفير بيانات الاعتماد الصحيحة من أجل استرداد عنوان URL للوحدة النمطية.

تبديل الميزات

يمكن استخدام السجل لتنفيذ تبديل الميزات، مما يسمح لك بتمكين الميزات أو تعطيلها ديناميكيًا دون إعادة توزيع التطبيقات. هذا مفيد لاختبار A/B وطرح ميزات جديدة تدريجيًا.

مثال: يمكن أن يحتوي السجل على تكوينات مختلفة لبيئات أو مجموعات مستخدمين مختلفة. بناءً على هوية المستخدم أو البيئة، يمكن للسجل إرجاع عناوين URL مختلفة لنفس الوحدة النمطية، مما يؤدي بشكل فعال إلى تمكين أو تعطيل ميزات معينة.

تكوين الوحدة النمطية الديناميكي

يمكن للسجل تسهيل تكوين الوحدة النمطية الديناميكي، حيث تعتمد الوحدات النمطية التي يتم تحميلها في وقت التشغيل على ظروف وقت التشغيل أو تفاعلات المستخدم. يتيح ذلك تطبيقات قابلة للتكيف وشخصية للغاية.

مثال: بناءً على تفضيلات المستخدم أو سياق الصفحة الحالية، يمكن للتطبيق الاستعلام عن السجل للوحدات النمطية المناسبة لتحميلها. يتيح ذلك تجربة مستخدم مخصصة للغاية.

الاعتبارات وأفضل الممارسات

في حين أن Runtime Registry يقدم فوائد كبيرة، فمن الضروري مراعاة العوامل التالية:

• الأداء: يؤدي جلب معلومات السجل إلى إضافة طلب شبكة إضافي. ضع في اعتبارك تخزين بيانات السجل مؤقتًا لتقليل زمن الوصول.
• التعقيد: يؤدي تنفيذ وصيانة Runtime Registry إلى إضافة تعقيد إلى بنيتك. قم بتقييم المفاضلات بعناية قبل اعتماد هذا النهج.
• الأمان: قم بحماية السجل من الوصول والتعديل غير المصرح بهما. قم بتنفيذ آليات المصادقة والترخيص المناسبة.
• معالجة الأخطاء: قم بتنفيذ معالجة قوية للأخطاء للتعامل بأمان مع الحالات التي يكون فيها السجل غير متاح أو لا يمكن تحميل الوحدة النمطية.
• قابلية التوسع: تأكد من أن السجل يمكنه التعامل مع الحمل المتوقع والتوسع مع نمو تطبيقك. ضع في اعتبارك استخدام قاعدة بيانات موزعة أو طبقة تخزين مؤقت لتحسين الأداء.
• الإدارة المركزية: قم بتنفيذ عمليات حوكمة وإدارة تغيير مناسبة حول السجل لضمان الاتساق وتجنب التعارضات.
• المراقبة: راقب أداء وتوافر السجل لتحديد المشكلات وحلها بشكل استباقي.

بدائل لسجل JSON بسيط

في حين أن ملف JSON بسيط يمثل نقطة انطلاق جيدة، غالبًا ما تكون هناك حاجة إلى حلول أكثر قوة لبيئات الإنتاج. ضع في اعتبارك هذه البدائل:

• خدمة API مخصصة: توفر خدمة API مخصصة تم إنشاؤها باستخدام Node.js أو Python أو Go مرونة وتحكمًا أكبر في منطق السجل. يتيح ذلك ميزات مثل المصادقة والترخيص وإدارة الإصدارات وموازنة التحميل.
• أدوات اكتشاف الخدمة (مثل Consul وetcd وZooKeeper): تم تصميم هذه الأدوات لإدارة تكوينات الخدمة وتوفير اكتشاف الخدمة الديناميكي. يمكن استخدامها لتخزين وإدارة بيانات سجل module federation.
• خدمات التكوين المستندة إلى السحابة (مثل AWS AppConfig وAzure App Configuration وGoogle Cloud Config): توفر هذه الخدمات طريقة مركزية وقابلة للتطوير لإدارة تكوينات التطبيق، بما في ذلك سجل module federation.
• منصات تنظيم الخدمات المصغرة الحالية (مثل Kubernetes): إذا كنت تستخدم بالفعل نظامًا أساسيًا لتنظيم الخدمات المصغرة، فيمكنك الاستفادة من ميزات اكتشاف الخدمة وإدارة التكوين المضمنة في النظام الأساسي لسجل module federation.

مثال: منصة تجارة إلكترونية عالمية

تخيل وجود منصة تجارة إلكترونية عالمية لها واجهات متاجر في بلدان متعددة. قد يكون لكل بلد كتالوجات منتجات مختلفة وطرق دفع وخيارات شحن. يمكن استخدام Runtime Registry لتحميل الوحدات النمطية المناسبة ديناميكيًا بناءً على موقع المستخدم وتفضيلاته.

على سبيل المثال، قد يرى المستخدم في ألمانيا كتالوج منتجات بأوصاف ألمانية وأسعار باليورو، بينما قد يرى المستخدم في اليابان كتالوج منتجات بأوصاف يابانية وأسعار بالين. سيحدد Runtime Registry الوحدات النمطية التي سيتم تحميلها بناءً على موقع المستخدم وتفضيلاته.

علاوة على ذلك، يمكن تحديد وحدة الدفع ديناميكيًا بناءً على موقع المستخدم. قد يرى المستخدمون في ألمانيا خيارات للدفع عن طريق PayPal أو بطاقة الائتمان، بينما قد يرى المستخدمون في اليابان خيارات للدفع عن طريق بطاقة الائتمان أو الدفع في المتاجر الصغيرة.

يصعب تحقيق هذا المستوى من التخصيص الديناميكي بدون Runtime Registry.

الخلاصة

Runtime Registry هي أداة قوية لتمكين اكتشاف الوحدات النمطية الديناميكي في JavaScript Module Federation. فهو يوفر العديد من المزايا، بما في ذلك فك الارتباط وقابلية التوسع والقدرة على التكيف والمرونة. في حين أن تنفيذ Runtime Registry يضيف تعقيدًا إلى بنيتك، إلا أن الفوائد غالبًا ما تفوق التكاليف، خاصة بالنسبة للتطبيقات الكبيرة والمعقدة. من خلال النظر بعناية في العوامل الموضحة في هذه المقالة، يمكنك تنفيذ Runtime Registry بنجاح وإطلاق الإمكانات الكاملة لـ Module Federation.

مع استمرار تطور بنية الواجهة الأمامية الصغيرة، سيلعب Runtime Registry دورًا متزايد الأهمية في تمكين تطبيقات الويب القابلة للتطوير والتكيف. احتضن هذه التقنية وابنِ مستقبل تطوير الواجهة الأمامية.